<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>员工信息管理系统</title>
	<link rel="stylesheet" href="elementui.css">
	<script src="vue.js"></script>
	<script src="elementui.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<div id="wrap">
		<!-- 添加新员工 -->
		<el-button type="primary" icon="el-icon-plus" @click="add">添加新员工</el-button>
		<el-dialog title="新员工信息" :visible.sync="dialogVisible" width="500px">   
			<el-form label-width="80px">
			 	<el-form-item label="姓名">
	    			<el-input v-model="addItem.name"></el-input>
	  			</el-form-item>
	  			<el-form-item label="性别">
	 				<template>
	    				<el-radio v-model="addItem.sex" label="1">男</el-radio>
	    				<el-radio v-model="addItem.sex" label="0">女</el-radio>
	    			</template>
	  			</el-form-item>
	  			<el-form-item label="出生日期">
	    			<el-date-picker v-model="addItem.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"> 
    				</el-date-picker>
	  			</el-form-item>
	  			<el-form-item label="所属部门">
	    			<el-input v-model="addItem.department"></el-input>
	  			</el-form-item>
	  			<el-form-item label="在职状态">
					<el-switch v-model="addItem.status" inactive-text="已离职" active-text="新入职" active-value="1" inactive-value="0">
					</el-switch>
	  			</el-form-item>
  				<el-form-item label="入职时间">
    				<el-date-picker v-model="addItem.joinDate" value-format="yyyy-MM-dd">在职</el-date-picker>
  				</el-form-item>
  				<el-form-item label="离职时间" v-if="!Number(addItem.status)">
    				<el-date-picker v-model="addItem.leaveDate" value-format="yyyy-MM-dd">离职</el-date-picker>
  				</el-form-item>
	  			<el-form-item label="薪资">
	    			<el-input v-model="addItem.salary"></el-input>
	  			</el-form-item>
	  			<el-form-item label="联系电话">
	    			<el-input v-model="addItem.number"></el-input>
	  			</el-form-item>
	  			<el-form-item label="身份证号">
	    			<el-input v-model="addItem.IDcard"></el-input>
	  			</el-form-item>
	  		</el-form>
		  	<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
    			<el-button type="primary" @click="submit">提交</el-button>
			</div>
		</el-dialog>
		<!-- 页面数据 -->
		<el-table :data="list" stripe>
			<el-table-column prop="ID" label="员工编号"></el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="sex" label="性别">
				<template slot-scope="data">
					<span v-if="data.row.sex==1">男</span>
					<span v-else>女</span>
				</template>
			</el-table-column>
			<el-table-column prop="birthday" label="出生日期"></el-table-column>
			<el-table-column prop="department" label="所属部门"></el-table-column>
			<el-table-column prop="status" label="在职状态">
				<template slot-scope="data">
					<el-tooltip placement="top-start" :content="'入职时间:'+data.row.joinDate" v-if="data.row.status" >
						<el-tag type="success">在职</el-tag>
					</el-tooltip>
					<el-tooltip  placement="top-start" :content="'离职时间:'+data.row.leaveDate" v-else>
						<el-tag type="danger">离职</el-tag>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="salary" label="薪资"></el-table-column>
			<el-table-column prop="number" label="联系电话"></el-table-column>
			<el-table-column label="操作" width="200px">
				<template slot-scope="data">
					<el-button  type="primary" size="mini" icon="el-icon-edit" @click="edit(data.row)">编辑</el-button>
					<el-button type="danger"  size="mini" icon="el-icon-delete" @click="del(data.row.ID)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 编辑员工 -->
		<el-dialog title="修改员工信息" :visible.sync="editdialogVisible" width="500px">
			<el-form label-width="80px">
				<el-form-item label="员工编号">
					<el-input v-model="editItem.ID" disabled></el-input>
				</el-form-item>
			 	<el-form-item label="姓名">
	    			<el-input v-model="editItem.name"></el-input>
	  			</el-form-item>
	  			<el-form-item label="性别">
	 				<template>
	    				<el-radio v-model="editItem.sex" label="1">男</el-radio>
	    				<el-radio v-model="editItem.sex" label="0">女</el-radio>
	    			</template>
	  			</el-form-item>
	  			<el-form-item label="出生日期">
	    			<el-date-picker v-model="editItem.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"> 
    				</el-date-picker>
	  			</el-form-item>
	  			<el-form-item label="所属部门">
	    			<el-input v-model="editItem.department"></el-input>
	  			</el-form-item>
	  			<el-form-item label="在职状态">
					<el-switch v-model="editItem.status" inactive-text="已离职" active-text="新入职" active-value="1" inactive-value="0">
					</el-switch>
	  			</el-form-item>
  				<el-form-item label="入职时间">
    				<el-date-picker v-model="editItem.joinDate" value-format="yyyy-MM-dd">在职</el-date-picker>
  				</el-form-item>
  				<el-form-item label="离职时间" v-if="!Number(editItem.status)">
    				<el-date-picker v-model="editItem.leaveDate" value-format="yyyy-MM-dd">离职</el-date-picker>
  				</el-form-item>
	  			<el-form-item label="薪资">
	    			<el-input v-model="editItem.salary"></el-input>
	  			</el-form-item>
	  			<el-form-item label="联系电话">
	    			<el-input v-model="editItem.number"></el-input>
	  			</el-form-item>
	  			<el-form-item label="身份证号">
	    			<el-input v-model="editItem.IDcard"></el-input>
	  			</el-form-item>
	  		</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editcancel">取消</el-button>
    			<el-button type="primary" @click="editsubmit">确定</el-button>
			</div>
		</el-dialog>
	</div>


	<script>
		var root=new Vue({	
			el:"#wrap",
			data:{
				list:[],
				dialogVisible:false,
				editdialogVisible:false,
				addItem:{
					name:"",
					sex:"1",
					birthday:"",
					department:"",
					status:"1",
					joinDate:"",
					leaveDate:"",
					salary:"",
					number:"",
					IDcard:""
				},
				editItem:{
					name:"",
					sex:"",
					birthday:"",
					department:"",
					status:"",
					joinDate:"",
					leaveDate:"",
					salary:"",
					number:"",
					ID:"",
					IDcard:"",
				}					
			},
			methods:{
				// 删除数据
				del(id){
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
         				confirmButtonText: '确定',
          				cancelButtonText: '取消',
          				type: 'warning'
       				}).then(() => {
       					axios.get("http://127.0.0.1:8080/del?ID="+id).then(function(response){
       						if(response.data=="success"){
	       						root.$notify({
	           						type: 'success',
	            					message: '删除成功!'
	          					})
	          					axios.get("http://127.0.0.1:8080/get").then(function(response){
	          						root.list=response.data
	          					})
	       					}else{
	       						root.$message({
	       							type:`info`,
	       							message:"删除失败"
	       						});
	       					}

	       					})
					
						}).catch(()=>{
							this.$message({
								type:'warning',
								message:'已取消删除'
							})
							
						})
				},
				// 添加数据
				add(){
					this.addItem={
						name:"",
						sex:"1",
						birthday:"",
						department:"",
						status:"1",
						joinDate:"",
						leaveDate:"",
						salary:"",
						number:"",
					},			
				 	this.dialogVisible=true;
			      },
			    cancel(){
			    	this.dialogVisible=false;
	       			root.$message({
	       				type:`info`,
	       				message:"取消添加"
	       			})
			    },
			      // 添加提交数据
			     submit(){
			     	root.dialogVisible=false;
			     	axios.get("http://127.0.0.1:8080/add",{
			     		params:{
			     			name:this.addItem.name,
			     			sex:this.addItem.sex,
			     			birthday:this.addItem.birthday,
			     			department:this.addItem.department,
			     			status:this.addItem.status,
			     			joinDate:this.addItem.joinDate,
			     			leaveDate:this.addItem.leaveDate,
			     			salary:this.addItem.salary,
			     			number:this.addItem.number,
			     			IDcard:this.addItem.IDcard
			     		} 		
			     	}).then(function(response){
			     		if(response.data=="success"){
			     			root.$message({
			     				title:"添加新员工成功",
			     				type:"success"
			     			})
			     			axios.get("http://127.0.0.1:8080/get").then(function(response){
								root.list=response.data;
							})
			     		}else{
	       					root.$message({
	       						type:`info`,
	       						message:"添加新用户失败"
	       					});
	       				}

			     	})
			     },
			     // 编辑表格数据
			     edit(data){
			     	for(let i in data){
			     		this.editItem[i]=data[i];
			     	}
			     	this.editdialogVisible=true;
			     },
			     editcancel(){
			     	this.editdialogVisible=false;
			     	root.$message({
	       				type:`info`,
	       				message:"取消编辑"
	       			})
			     },
			     editsubmit(){
			     	this.editdialogVisible=false;
			     		axios.get("http://127.0.0.1:8080/edit",{
			     			params:{
			     				name:this.editItem.name,
								sex:this.editItem.sex,
								birthday:this.editItem.birthday,
								department:this.editItem.department,
								status:this.editItem.status,
								joinDate:this.editItem.joinDate,
								leaveDate:this.editItem.leaveDate,
								salary:this.editItem.salary,
								number:this.editItem.number,
								ID:this.editItem.ID,
								IDcard:this.editItem.IDcard
						     }
						}).then((response)=>{
							if(response.data=="success"){
								this.$notify({
									message:"员工信息修改成功",
									type:"success"
								})
							 axios.get("http://127.0.0.1:8080/get").then(function(response){
									root.list=response.data;
							})	
							}else{
								this.$message({
	       							type:`info`,
	       							message:"修改用户失败"
	       						});
							}
						}).catch(()=>{
							this.$message({
								type:'warning',
								message:'已取消添加'
							})
							
						})
					}		     	
			},
			mounted(){
				 axios.get("http://127.0.0.1:8080/get").then(function(response){
					root.list=response.data;
				})
		    }
		
	})
	</script>
</body>
</html>